<template>
  <view class="task-layout">
    <my-header background-color="transparent" fit-weixin>
      <template v-slot:menu>
		<text @click="play">规则</text>
      </template>
    </my-header>
    <my-content class="content">
      <view class="dot"></view>
      <view class="box">
        <my-welfare-tab :tab-list="typeData" v-model="type"></my-welfare-tab>
        <view class="box_content">
          <view class="box_content_item" v-for="(item,index) in taskData" :key="item.id">
            <view class="box_content_header" v-if="type == 1">
              今日消费满<text class="amount">{{item.amount}}</text>元
            </view>
            <view class="box_content_header" v-else>
              今日充值满<text class="amount">{{item.amount}}</text>元
            </view>

            <view class="box_rewards">
              <view class="box_reward_box">
                <view class="box_rewards_item" v-for="value in item.reward" :key="value.id">
                  <view class="box_rewards_item_top">
                    <image mode="widthFix" class="box_rewards_image" :src="value.image"></image>
                  </view>
                  <view class="box_rewards_item_bottom">{{value.name}} * {{value.num}}</view>
                </view>
              </view>
              <view class="action none" v-if="item.status == 0">
                <text v-if="type == 1">消费</text>
                <text v-if="type == 2">充值</text>
                <text>满额可领取 仅差</text>
                <text class="amount">{{item.diff_amount}}</text>
                <text>元</text>
              </view>

              <view @click="submit(item,index)" class="action" v-if="item.status == 1">
                条件达到点击领取
              </view>

              <view class="action" v-if="item.status == 2">
                今日已领取，请明天再来
              </view>
            </view>
          </view>
        </view>
      </view>

    </my-content>
  </view>

</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				type:0,
				typeData:
				[
          "充值任务", "消费任务",
				],
				taskData:[]
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.getData();
		},

    watch: {
      type() {
        this.getData()
      }
    },
		
		methods: {
			back(){
				uni.navigateBack()
			},
			play(){
				this.header('/packageB/content/task')
			},
			changeType(item) {
				/*if (this.type != item.id) {
					this.type = item.id
					this.getData()
				}*/
			},
			getData(){
				uni.showLoading({
					title:'数据加载中'
				})
				api.tasks.index({type:this.type + 1}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.taskData = res.data;
					}
				}).catch(error => {
					console.log(error)
				})
			},
			submit(item,index){
				item.status = 2;
				this.$set(this.taskData,index,item)
				api.tasks.reward(item.id).then(res => {
					if (res.code === 200) {
						this.show(res.msg)
						setTimeout(() => {
							this.getData()
						},1000)
					}
				}).catch(error => {
					console.log(error)
				})
			},
		},
	}
</script>

<style lang="scss">

.task-layout {
  min-height: 100vh;
  background-color: black;
}

	.content {
		position: relative;
		min-height: 100vh;
		height: 100%;
    background-image: url("https://www.dingxians.cn/upload/images/index/bg-task.png");
    background-size: 100% 100%;
		.tabbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:100%;
			position: fixed;
			left: 0;
			top:80rpx;
			z-index:5;
			.back {
				width: 65rpx;
				height: 65rpx;
				margin-left: 20rpx;
			}
		}
		.cover {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100vw;
			z-index: -1000;
			background-color: #270f7c;
		}
		
		.tabbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:100%;
			position: fixed;
			left: 0;
			top:80rpx;
			z-index:5;
			.back {
				width: 65rpx;
				height: 65rpx;
				margin-left: 20rpx;
			}
			.play {
				width: 65rpx;
				height: 65rpx;
				margin-right: 20rpx;
			}
		}
		
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100vw;
			z-index: -100;
		}
		.dot {
			height:850rpx;
      background-image: url("https://www.dingxians.cn/upload/images/index/bg-task-header.png");
      background-size: 100% 100%;
		}
		.box {
			display: flex;
			flex-direction: column;
			.box_header{
				display: flex;
				width: 600rpx;
				margin: 0 auto 20rpx auto;
				justify-content: space-between;
				align-items: center;
				.box_header_item {
					 
					.box_header_item_image {
						width: 290rpx;
					}
				}
			}
		
			.box_content {
				display: flex;
				flex-direction: column;
				
				.box_content_item {
					display: flex;
					flex-direction: column;
					width: 700rpx;
          /*height: 383rpx;*/
					margin: 40rpx auto 30rpx auto;
					position: relative;
          background-image: url("https://www.dingxians.cn/upload/images/index/bg-task-item.png");
          background-size: 100% 100%;

					.box_content_item_bg {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						z-index: -1;
					}
					.box_content_header {
						color: #fff;
						font-size: 32rpx;
						/*margin-left:40rpx;*/
            text-align: center;
						/*height: 60rpx;*/
						/*line-height: 60rpx;*/
						font-weight: bold;
						.amount {
							color:#DED000;
						}
					}
					.box_rewards {
						display: flex;
						flex-direction: column;
						.box_reward_box {
							display: flex;
							margin:40rpx 20rpx;
							.box_rewards_item {
								width: 180rpx;
								margin: 0 25rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								.box_rewards_item_top {
									display: flex;
									justify-content: center;
									align-items: center;
									/*background: linear-gradient(to bottom,  #AE56FF 51%,  #D78EFF 100% );*/
                  background-image: url("https://www.dingxians.cn/upload/images/index/bg-task-1.png");
                  background-size: 100% 100%;
									width: 100%;
									height: 180rpx;
									z-index: 2;
									.box_rewards_image {
										width: 80rpx;
									}
								}
								.box_rewards_item_bottom {
									color: white;
									font-size: 24rpx;
									/*margin-top: 20rpx;*/
								}
							}
						}
					
						.action {
              position: relative;
              top: 30rpx;
							width: 480rpx;
							color: white;
							font-size: 32rpx;
							/*margin: 0 auto 50rpx auto;*/
              margin: 0 auto;
							text-align: center;
							height: 100rpx;
							line-height: 100rpx;
							/*border-radius: 50rpx;*/
              background-size: 100% 100%;
              background-image: url("https://www.dingxians.cn/upload/images/index/bg-task-action.png");
							/*background: linear-gradient(to bottom, #FBFFA8, #8BFAFF );*/
							font-weight: bold;
							/*box-shadow: #71C2CB 0 5rpx;*/
							&.none {
                background-image: url("https://www.dingxians.cn/upload/images/index/bg-task-action-disable.png");
								/*background: linear-gradient(to bottom, #F7F7F7, #E5E5E5 );*/
								color: black;
								/*box-shadow: #300B74 0 5rpx;*/
							}
							.amount {
								color:#FF5B5B;
							}
						}
					} 
				}
				
			}
		}
	}
</style>